/** @jsxImportSource react */
'use client'

import { useState } from 'react'

const faqs = [
  {
    question: 'What are nicotine pouches?',
    answer: 'Nicotine pouches are tobacco-free alternatives that contain nicotine, flavorings, and plant-based materials. They are placed between the upper lip and gum for nicotine absorption.',
  },
  {
    question: 'How do I use nicotine pouches?',
    answer: 'Place one pouch between your upper lip and gum. Leave it there for up to 60 minutes. No spitting is required. Dispose of the used pouch responsibly.',
  },
  {
    question: 'What strength should I choose?',
    answer: 'If you\'re new to nicotine pouches, we recommend starting with a lower strength (3-6mg). Experienced users may prefer stronger options (9-12mg).',
  },
  {
    question: 'How long do nicotine pouches last?',
    answer: 'A single pouch can be used for up to 60 minutes, though the nicotine and flavor release will gradually decrease over time.',
  },
  {
    question: 'Are nicotine pouches safe?',
    answer: 'While nicotine pouches are tobacco-free, they contain nicotine which is addictive. Consult your healthcare provider before use.',
  },
  {
    question: 'What payment methods do you accept?',
    answer: 'We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely.',
  },
  {
    question: 'What is your shipping policy?',
    answer: 'We offer free shipping on orders over $50. Standard shipping takes 3-5 business days. Express shipping options are available.',
  },
  {
    question: 'What is your return policy?',
    answer: 'We accept returns within 30 days of purchase for unopened products. Contact our customer service for return authorization.',
  },
]

export default function FAQPage() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container py-16">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl font-bold mb-4">Frequently Asked Questions</h1>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Find answers to common questions about our products, shipping, and more.
          </p>
        </div>

        {/* FAQ List */}
        <div className="max-w-3xl mx-auto">
          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div
                key={index}
                className="bg-white rounded-lg shadow-sm overflow-hidden"
              >
                <button
                  className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50"
                  onClick={() => setOpenIndex(openIndex === index ? null : index)}
                >
                  <span className="font-medium">{faq.question}</span>
                  <svg
                    className={`w-5 h-5 transform transition-transform ${
                      openIndex === index ? 'rotate-180' : ''
                    }`}
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>
                {openIndex === index && (
                  <div className="px-6 py-4 bg-gray-50">
                    <p className="text-gray-600">{faq.answer}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Contact Section */}
        <div className="mt-16 text-center">
          <p className="text-gray-600">
            Still have questions? Contact our support team at{' '}
            <a href="mailto:support@topzyn.com" className="text-primary hover:underline">
              support@topzyn.com
            </a>
          </p>
        </div>
      </div>
    </div>
  )
} 